const os = require('os')
const path = require('path')
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

// cpu核数
const threads = os.cpus().length

module.exports = {
  // 入口
  entry: './src/main.js', // 相对路径-运行代码的路径
  // 输出
  output: {
    // 文件输出路径
    path: path.resolve(__dirname, '../dist'), 
    // 入口文件名
    filename: 'static/js/main.js',
    // 自动清空上次打包的内容
    // 原理：在打包前，将path整个目录内容清空
    // webpack5
    clean: true
  },
  // 加载器
  module: {
    rules: [
      {
        // 一个文件只能匹配一个loader
        oneOf: [
          {
            test: /\.css$/i,
            use: [
              // 将 JS 字符串生成为 style 节点
              'style-loader', 
              // 将 CSS 转化成 CommonJS 模块
              'css-loader'
            ], // 从右到左，从下到上
          },
          {
            test: /\.less$/i,
            use: [
              // compiles Less to CSS
              'style-loader',
              'css-loader',
              'less-loader',
            ]
          },
          {
            test: /\.s[ac]ss$/i,
            use: [
              // 将 JS 字符串生成为 style 节点
              'style-loader',
              // 将 CSS 转化成 CommonJS 模块
              'css-loader',
              // 将 Sass 编译成 CSS
              'sass-loader',
            ],
          },
          {
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: 'asset',
            parser: {
              dataUrlCondition: {
                // 小于10kb 装换为base64
                // 优点： 减少请求数量 缺点：体积大
                maxSize: 10 * 1024
              }
            },
            generator: {
              // 输出图片名称
              // [hash:8] hash值取前8位
              filename: 'static/images/[hash:8][ext][query]'
            }
          },
          {
            test: /\.(ttf|woff2?|mp4)$/,
            type: 'asset/resource',
            generator: {
              // 输出图片名称
              // [hash:8] hash值取前8位
              filename: 'static/media/[hash:8][ext][query]'
            }
          },
          {
            test: /\.js$/,
            // exclude: /node_modules/, // 排除node_modules代码不编译
            include: path.resolve(__dirname, '../src'),
            loader: "babel-loader",
            options: {
              cacheDirectory: true, // 开启babel编译缓存
              cacheCompression: false, // 缓存文件不要压缩, 提升打包速度
            }
          }
        ]
      }
    ]
  },
  // 插件
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, '../src'),
      cache: true, // 开启缓存
      // 缓存目录
      cacheLocation: path.resolve(__dirname, '../node_modules/.cache/eslintcache'),
      threads // 开启多进程
    }),
    new HtmlWebpackPlugin({
      // 模板: 以public/index.html 文件创建新的html文件
      // 新的html文件特点： 1.结构和原来一致 2.自动引入打包的资源
      template: path.resolve(__dirname, '../public/index.html')
    })
  ],
  // 开发服务器
  devServer: {
    host: 'localhost', // 启动服务器域名
    port: '3000', // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    hot: true // 开启HMR功能（只能用于开发环境，生产环境不需要了）
  },
  // 模式
  mode: 'development',
  devtool: 'eval-cheap-module-source-map'
}